<!-- 商户申请审核 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <div class="flex gap-5">
        <div class="flex flex-wrap gap-2">
          <el-form-item prop="keyword" label="关键字">
            <el-input v-model="queryParams.keyword" placeholder="小区" clearable @keyup.enter="initList" />
          </el-form-item>
          <el-form-item label="预算(元)" prop="name">
            <el-input v-model="queryParams.budgetMin" placeholder="最少预算" type="number" style="width: 120px" />
            <span style="margin: 0 10px">-</span>
            <el-input v-model="queryParams.budgetMax" placeholder="最多预算" type="number" style="width: 120px" />
          </el-form-item>
          <el-form-item label="品类" prop="name" style="width: 200px">
            <el-select v-model="queryParams.categoryTypeIds" placeholder="请选择" multiple collapse-tags
              collapse-tags-tooltip>
              <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item prop="dateRange" label="发布时间">
            <el-date-picker v-model="dateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :shortcuts="shortcuts"
              @change="handleDateChange" />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click.stop="initList">
            <template #icon>
              <Search />
            </template>
            搜索
          </el-button>
          <el-button @click.stop="handleResetQuery">
            <template #icon>
              <Refresh />
            </template>
            重置
          </el-button>
        </el-form-item>
      </div>
    </div>
    <!-- <el-tabs v-model="queryParams.type" class="enter-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="装修需求" :name="2"></el-tab-pane>
      <el-tab-pane label="材料需求" :name="1"></el-tab-pane>
    </el-tabs> -->
    <BasePageTable :total="total" :loading="loading" :page-num="queryParams.pageNum" :page-size="queryParams.pageSize"
      :table-data="tableData" :table-columns-data="tableColumnsData" @handleQuery="handleQuery">
      <template #handle="scope">
        <el-button link type="primary" @click="lookDetail(scope.row)">查看</el-button>
      </template>
    </BasePageTable>
    <detail ref="detailRef"></detail>
  </div>
</template>
<script setup>
import opportunityApi from "@/api/mall/opportunity";
import CommonAPI from '@/api/system/common'
import detail from "./components/detail.vue";
import { materialTableColumnsData, designerTableColumnsData } from "./opportunity";
import { useUserStore } from "@/store";

const userStore = useUserStore();
const userType = userStore.userInfo.userType;
const loading = ref(false);
const greetFormRef = ref();
const detailRef = ref();
const shortcuts = [
  {
    text: "今天",
    value: () => {
      const start = new Date();
      start.setHours(0, 0, 0, 0);
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      return [start, end];
    },
  },
  {
    text: "近三天",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      const start = new Date();
      start.setDate(start.getDate() - 2);
      start.setHours(0, 0, 0, 0);
      return [start, end];
    },
  },
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 999);
      const start = new Date();
      start.setDate(start.getDate() - 6);
      start.setHours(0, 0, 0, 0);
      return [start, end];
    },
  },
];
const tableColumnsData = ref([]);

const total = ref(0);
const queryParams = ref({
  categoryTypeIds: "",
  pageNum: 1,
  pageSize: 10,
  type: 1,
  keyword: "",
  startTime: "",
  endTime: "",
  // space: [],
  budgetMax: undefined,
  budgetMin: undefined,
});
const dateRange = ref();

const handleDateChange = (date) => {
  if (date) {
    queryParams.value.startTime = date[0];
    queryParams.value.endTime = date[1];
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
};

const handleTabClick = () => {
  if (queryParams.value.type == 1) {
    tableColumnsData.value = materialTableColumnsData;
  } else {
    tableColumnsData.value = designerTableColumnsData;
  }
};
const handleResetQuery = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  dateRange.value = ref();
  queryParams.value.keyword = "";
  queryParams.value.startTime = "";
  queryParams.value.endTime = "";
  queryParams.value.categoryTypeIds = [];
  queryParams.value.space = [];
  queryParams.value.budgetMax = undefined;
  queryParams.value.budgetMin = undefined;
  initList();
};
const tableData = ref([]);
const categoryList = ref([]);
const handleGreet = async (row) => {
  greetFormRef.value.showModal(row);
};

const lookDetail = async (row) => {
  detailRef.value.showModal(row);
};

/**
 * 请求相关
 *
 */
//获取机会列表
const getOpportunityList = async () => {
  try {
    loading.value = true;
    // queryParams.value.type = userType == "MC02" ? 1 : 2;
    queryParams.value.type = 2;

    const res = await opportunityApi.getPage(queryParams.value);
    tableData.value = res.data;
    total.value = res.total;
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};

function initList() {
  queryParams.value.pageNum = 1;
  getOpportunityList();
}
function handleQuery(val) {
  queryParams.value.pageNum = val.pageNum;
  queryParams.value.pageSize = val.pageSize;
  getOpportunityList();
}

async function getCategoryLists() {
  try {
    const res = await CommonAPI.getCategoryList({
      parentId: 2,
    })
    categoryList.value = res.data
  } catch (error) { }
}


/**
 * 所有用的上的字典表定义
 * @field 搜索中用到的字段
 * @label 字典表的label
 * @list 每个tag的列表
 */

onMounted(async () => {
  // 配置有商品分类的，需要获取商品分类数据
  await getCategoryLists();

  // 获取商品分类数据，并添加到上面所有的列表中，供不同角色使用
  tableColumnsData.value = designerTableColumnsData;
  await getOpportunityList();
});
</script>
<style lang="scss" scoped>
.enter-tabs {
  background-color: #fff;
  padding: 10px 20px;
}

.el-collapse {
  border: 0;
}
</style>
